{% extends "base.html" %} {% block content %} {% load custom_filter %}

<div class="row">
    <div class="col-md-6">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">系统状态</h3>
            </div>
            <div class="box-body">
                <div class="col-sm-12">
                    <table class="table no-border">
                        <tbody>
                            <tr>
                                <td class="pull-right"><strong>Nginx 版本</strong></td>
                                <td><span id="sp_info_nginx"></span> <span id="sp_nginx_status"></span> <span id="sp_nginx_config_status"></span><span id="sp_uptime"></span></td>
                            </tr>
                            <tr>
                                <td class="pull-right"><strong>主机名</strong></td>
                                <td><span id="sp_info_node"></span></td>
                            </tr>
                            <tr>
                                <td class="pull-right"><strong>操作系统</strong></td>
                                <td><span id="sp_info_system"></span> <span id="sp_info_release"></span></td>
                            </tr>
                            <tr>
                                <td class="pull-right"><strong>系统架构</strong></td>
                                <td><spam id="sp_info_processor"></span></td>
                            </tr>
                            <tr>
                                <td class="pull-right"><strong>网络信息</strong></td>
                                <td id="td_info_nic">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">资源使用</h3>
            </div>
            <div class="box-body">
                <div class="col-sm-12">
                    <table class="table no-border">
                        <tbody>
                            <tr>
                                <div class="progress-group">
                                    <span class="progress-text">处理器</span>
                                    <span class="progress-number"><b><span id="sp_cpu_percent">-</span></b>/100 %</span>
                                    <div class="progress active">
                                        <div class="progress-bar progress-bar-striped" role="progressbar" id="pgs_cpu">
                                        </div>
                                    </div>
                                </div>
                            </tr>
                            <tr>
                                <div class="progress-group">
                                    <span class="progress-text">内存</span>
                                    <span class="progress-number"><b><span id="sp_mem_used">-</span></b>/<span id="sp_mem_total"></span> MB</span>
                                    <div class="progress active">
                                        <div class="progress-bar progress-bar-striped" role="progressbar" id="pgs_mem">
                                        </div>
                                    </div>
                                </div>
                            </tr>
                            <tr>
                                <div class="progress-group">
                                    <span class="progress-text">磁盘</span>
                                    <span class="progress-number"><b><span id="sp_disk_used">-</span></b>/<span id="sp_disk_total"></span> GB</span>
                                    <div class="progress active">
                                        <div class="progress-bar progress-bar-striped" role="progressbar" id="pgs_disk">
                                        </div>
                                    </div>
                                </div>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">连接统计</h3>
            </div>
            <div class="box-body">
                <div class="col-sm-12">
                    <div id="div_connection_count" style="height:285px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">请求统计</h3>
                <button type="button" class="btn btn-primary btn-sm pull-right" onclick="reset_req_status()">重置统计缓存</button>
            </div>
            <div class="box-body">
                <div class="col-sm-12">
                    <table id="tb_request_count" class="table table-bordered table-hover dataTable" role="grid">
                        <thead>
                            <tr role="row">
                                <th class="sorting" rowspan="1" colspan="1">站点</th>
                                <th class="sorting" rowspan="1" colspan="1">总连接数</th>
                                <th class="sorting" rowspan="1" colspan="1">流量统计</th>
                                <th class="sorting" rowspan="1" colspan="1">HTTP 1xx</th>
                                <th class="sorting" rowspan="1" colspan="1">HTTP 2xx</th>
                                <th class="sorting" rowspan="1" colspan="1">HTTP 3xx</th>
                                <th class="sorting" rowspan="1" colspan="1">HTTP 4xx</th>
                                <th class="sorting" rowspan="1" colspan="1">HTTP 5xx</th>
                            </tr>
                        </thead>
                        <tbody id="tb_request_count_body">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>



{% load staticfiles %}
<script src="{% static "plugins/echarts/echarts.min.js" %}"></script>
<script src="{% static "plugins/echarts/macarons.js" %}"></script>
<script>
$('#menu_dashboard').addClass('active')
$('#menu_service').removeClass('active')
$('#page_header').text('服务状态')
$('#page_header_descript').text('负载均衡系统状态展示')
$('#page_nav').text('服务状态')
$('#page_name').text('服务状态')

var charts_data_total = []
var charts_data_establish = []
var charts_data_timewait = []
var date = []
var option = {
    grid: {
        left: '40',
        right: '40',
        top: '50',
        bottom: '40'
    },
    legend: {
        data: ['总连接', '已连接', '待释放']
    },
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: date
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '总连接',
        type: 'line',
        smooth: true,
        data: charts_data_total,
        symbolSize: 2,
        markPoint: {
            data: [{
                type: 'max',
                name: '最大'
            }, {
                type: 'min',
                name: '最小'
            }]
        },
        markLine: {
            data: [{
                type: 'average',
                name: '平均'
            }]
        }
    }, {
        name: '已连接',
        type: 'line',
        smooth: true,
        data: charts_data_establish,
        symbolSize: 2,
        markPoint: {
            data: [{
                type: 'max',
                name: '最大'
            }, {
                type: 'min',
                name: '最小'
            }]
        },
        markLine: {
            data: [{
                type: 'average',
                name: '平均'
            }]
        }
    }, {
        name: '待释放',
        type: 'line',
        smooth: true,
        data: charts_data_timewait,
        symbolSize: 2,
        markPoint: {
            data: [{
                type: 'max',
                name: '最大'
            }, {
                type: 'min',
                name: '最小'
            }]
        },
        markLine: {
            data: [{
                type: 'average',
                name: '平均'
            }]
        }
    }]
};


function add_data(_init, _conn_total, _conn_establish, _conn_timewait) {
    if (date.length == 12) {
        date.shift()
        charts_data_total.shift()
        charts_data_establish.shift()
        charts_data_timewait.shift()
    }
    var _option = {
        xAxis: {
            data: date
        },
        series: [{
            name: '总连接',
            data: charts_data_total
        }, {
            name: '已建立',
            data: charts_data_establish
        }, {
            name: '待释放',
            data: charts_data_timewait
        }, ]
    }
    if (_init) {
        date.push('0')
    } else {
        date.push(new Date().toLocaleTimeString().replace(/^\D*/, ''))
    }

    charts_data_total.push(_conn_total)
    charts_data_establish.push(_conn_establish)
    charts_data_timewait.push(_conn_timewait)
    connection_chart.setOption(_option)
}

function reset_req_status() {
    if (confirm("确认要清空流量统计缓存？")) {
        jQuery.ajax({
            type: 'get',
            url: '/dashboard/resetreq/',
            dataType: 'json',
            success: function(p) {
                if (p.flag == "Success") {
                    alert('流量缓存已清空！')
                    top.location = '/dashboard/'
                } else if (p.flag == "Error" && p.context == "AuthFailed") {
                    alert('认证失败！请重新登录！')
                    top.location = '/login/'
                } else {
                    alert('操作失败！')
                }
            }
        })
    }
}

function get_uptime(uptime_ms) {
    var uptime_ms = uptime_ms;
    if (uptime_ms != 0 ) {
        var seconds = Math.floor(uptime_ms/ 1000);
        var minutes = Math.floor(seconds / 60);
        var hours = Math.floor(minutes / 60);
        var days = Math.floor(hours / 24);

        hours = hours % 24;
        minutes = minutes % 60;
        seconds = seconds % 60;

        var timeString = "";

        if (days > 0) {
          timeString += days + " 天 ";
        }
        if (hours > 0) {
          timeString += hours + " 时 ";
        }
        if (minutes > 0) {
          timeString += minutes + " 分 ";
        }
        if (seconds > 0) {
          timeString += seconds + " 秒";
        }

        $('#sp_uptime').removeClass()
        $('#sp_uptime').addClass('label label-success')
        $('#sp_uptime').text(timeString)
    }
}

function get_status_info() {
    jQuery.ajax({
        type: 'post',
        url: '/dashboard/getinfo/',
        dataType: 'json',
        success: function(p) {
            if (p.flag == "Success") {
                if (p.context.sysstatus.nginx_status) {
                    $('#sp_nginx_status').removeClass()
                    $('#sp_nginx_status').addClass('label label-success')
                    $('#sp_nginx_status').text('运行中')
                } else {
                    $('#sp_nginx_status').removeClass()
                    $('#sp_nginx_status').addClass('label label-danger')
                    $('#sp_nginx_status').text('已停止')
                }

                get_uptime(p.context.sysinfo.platform.uptime)

                $('#sp_info_nginx').text(p.context.sysinfo.nginx)
                $('#sp_info_node').text(p.context.sysinfo.platform.node)
                $('#sp_info_system').text(p.context.sysinfo.platform.system)
                $('#sp_info_release').text(p.context.sysinfo.platform.release)
                $('#sp_info_processor').text(p.context.sysinfo.platform.processor)
                $('#td_info_nic').empty()
                for (var f in p.context.sysinfo.nic) {
                    $('#td_info_nic').append("<small>" + p.context.sysinfo.nic[f].nic + "</small> " + p.context.sysinfo.nic[f].address + " ")
                }

                if (!p.context.sysstatus.nginx_config_status) {
                    $('#sp_nginx_config_status').removeClass()
                    $('#sp_nginx_config_status').addClass('label label-danger')
                    $('#sp_nginx_config_status').text('配置异常')
                }

                $('#sp_cpu_percent').text(p.context.sysstatus.cpu_percent)
                $('#sp_mem_used').text(p.context.sysstatus.mem_info.used)
                $('#sp_mem_total').text(p.context.sysstatus.mem_info.total)
                $('#sp_disk_used').text(p.context.sysstatus.disk_info.used)
                $('#sp_disk_total').text(p.context.sysstatus.disk_info.total)

                $('#pgs_cpu').css('width', p.context.sysstatus.cpu_percent + '%')
                $('#pgs_mem').css('width', p.context.sysstatus.mem_info.used / p.context.sysstatus.mem_info.total * 100 + '%')
                $('#pgs_disk').css('width', p.context.sysstatus.disk_info.used / p.context.sysstatus.disk_info.total * 100 + '%')

                add_data(false, p.context.sysstatus.connect_info.total, p.context.sysstatus.connect_info.established, p.context.sysstatus.connect_info.time_wait)

                $('#tb_request_count_body').empty()
                if (p.context.reqstatus.length == 0) {
                    var req_td = "<tr><td>无数据</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>"
                    $('#tb_request_count_body').append(req_td)
                } else {
                    for (var f in p.context.reqstatus) {
                        var req = p.context.reqstatus[f]
                        var inBytes = req.inBytes / 1048576 
                        var outBytes = req.outBytes / 1048576 
                        if (inBytes > 1024) { inBytes = "<strong>" + (inBytes / 1024).toFixed(2) + " GB</strong>" } else { inBytes = inBytes.toFixed(2) + " MB" }                            
                        if (outBytes > 1024) { outBytes = "<strong>" + (outBytes / 1024).toFixed(2) + " GB</strong>" } else { outBytes = outBytes.toFixed(2) + " MB" } 
                        var req_td = "<tr>"
                        req_td += "<td>" + req.zone + "</td><td>" + req.connectCounter + "</td>"
                        req_td += "<td><small>in</small> " + inBytes + " / <small>out</small> " + outBytes + " </td>"
                        req_td += "<td>" + req.responses['1xx'] + "</td><td>" + req.responses['2xx'] + "</td><td>" + req.responses['3xx']  + "</td><td>" + req.responses['4xx']  + "</td><td>" + req.responses['5xx'] + "</td></tr>"
                        $('#tb_request_count_body').append(req_td)
                    }
                }

            } else if (p.flag == "Error" && p.context == "AuthFailed") {
                alert('认证失败！请重新登录！')
                top.location = '/login/'
            }
        }
    })
}

var connection_chart = echarts.init($('#div_connection_count')[0], 'macarons');
connection_chart.setOption(option)
for (var i = 1; i <= 12; i++) {
    add_data(true, 0, 0, 0);
}
get_status_info()
window.setInterval(get_status_info, 5000);
</script>
{% endblock %}
